<template>
    <view>
        <custom>
            <template #right>
                <view class="search-form round border-1-nddyny" style="height: 72rpx; margin-left: 20rpx; margin-right: 20rpx;">
                    <text class="cuIcon-search"></text>
                    <input @input="(e)=>{data.form.search_value = e.target.value}" :value="data.form.search_value"
                        style="font-size: 28rpx;" placeholder="搜一搜商家、支付日期" confirm-type="search"></input>
                    <text class="cuIcon-close" style="margin-right: 16rpx; margin-left: 0" @tap="()=>{data.form.search_value = ''; searchBtn()}"></text>
                </view>
                <view @tap="searchBtn" class="text-lg margin-right-24">
                    <text>搜索</text>
                </view>
            </template>
        </custom>
        <emptyList v-if="data.list.length == 0" empty_list_title="还没有支付记录"></emptyList>
        <view v-else v-for="(info, key) in data.list" :key="key" class="margin-20 bg-white padding-20 radius-16" @tap="()=>{data.form.is_manage == 0 ? $store.commit('userNavTo', '/seller/item/list?seller_id='+info.seller_user_id) : ''}">
            <view class="flex justify-between width-100p text-13 line-height-11em margin-bottom-10">
                <view class="text-gray flex-s0 margin-right-10">
                    {{info.pay_callback_time | dateFormat('yyyy-MM-dd hh:mm:ss')}}
                </view>
                <view>
                    <text class="text-gray margin-right-10 text-sm text-nddyny">({{info.pay_type_string}})</text>
                    <text v-if="info.pay_status == 1" class="text-nddyny text-bold text-15">
                        支付成功
                    </text>
                    <text v-else-if="info.pay_status == 2" class="text-red text-bold text-15">
                        支付出错了
                    </text>
                </view>
            </view>
            <view v-if="info.pay_remark" class="text-red text-bold line-height-11em margin-bottom-10">
                {{info.pay_remark}}
            </view>
            <view class="flex">
                <view>
                    <image style="width: 150rpx; height: 150rpx;" :src="info.seller_logo | ossUrl(150)" v-if="data.form.is_manage == 0"></image>
                    <image style="width: 150rpx; height: 150rpx;" :src="info.user_avatar | ossUrl(150)" v-else-if="info.user_avatar"></image>
                    <view v-else style="width: 150rpx; height: 150rpx;">
                        <view class="cu-avatar round margin-10" style="width: 130rpx; height: 130rpx;">
                            <text style="font-size: 72rpx;" class="cuIcon-people"></text>
                        </view>
                    </view>
                </view>
                <view class="margin-left-10 width-100p">
                    <view class="text-cut-1 text-bold text-15" v-if="data.form.is_manage == 0">
                        {{info.seller_name}}
                    </view>
                    <view v-else class="flex align-end">
                        <view class="text-cut-1 text-15 text-bold">
                            <text v-if="info.user_nickname">{{info.user_nickname}}</text>
                            <text class="text-red" v-else>支付时未登录</text>
                        </view>
                        <view class="text-666 margin-left-10 flex-s0">
                            {{info.user_phone}}
                        </view>
                    </view>
                    <view class="text-sm text-gray">
                        {{info.pay_order_no}}
                    </view>
                    <view class="text-right" v-if="data.form.is_manage == 0">
                        <view class="text-sm text-666" v-if="info.bonus_gold_coupon_amount > 0">
                            <text class="text-nddyny">({{info.bonus_gold_coupon_ratio}}%)</text>
                            <text class="margin-left-4">赠送金券：</text>
                            <text>总赠 {{info.bonus_gold_coupon_amount | floor(4)}}，</text>
                            <text>实赠 {{info.bonus_user_success_gold_coupon_amount | floor(4)}}</text>
                        </view>
                        <view class="text-sm text-666" v-if="info.pay_advpay_amount > 0 || info.pay_voucher_amount > 0">
                            使用：
                            <text v-if="info.pay_advpay_amount > 0">
                                消费余额 <text class="text-sm margin-left-4">￥</text>{{info.pay_advpay_amount | floor}}
                                <text v-if="info.pay_voucher_amount > 0">，</text>
                            </text>
                            <text v-if="info.pay_voucher_amount > 0">
                                消费红包<text class="text-sm margin-left-4">￥</text>{{info.pay_voucher_amount | floor}}
                            </text>
                        </view>
                        <view>
                            <text class="text-444 text-bold text-13">
                                总价<text class="text-sm margin-left-4">￥</text>{{info.pay_order_total_value | floor}}，
                            </text>
                            <text class="text-red text-bold">
                                实付款<text class="text-sm margin-left-4">￥</text>{{info.pay_order_price | floor}}
                            </text>
                        </view>
                    </view>
                    <view v-else class="text-right">
                        <view class="text-sm text-666" v-if="info.bonus_gold_coupon_amount > 0">
                            <text class="text-nddyny">({{info.bonus_gold_coupon_ratio}}%)</text>
                            <text class="margin-left-4">赠送金券：</text>
                            <text>{{info.bonus_gold_coupon_amount | floor(4)}}，</text>
                            <text>
                                总价<text class="text-sm margin-left-4">￥</text>{{info.pay_order_total_value | floor}}
                            </text>
                        </view>
                        <view class="text-bold text-df" :class="[
                          info.pay_seller_goods_amount_status == 2 ? 'text-red' : '',
                          info.pay_seller_goods_amount_status == 1 ? 'text-blue' : '',
                          info.pay_seller_goods_amount_status == 0 ? '' : '',
                      ]">
                            <text v-if="info.pay_seller_goods_amount_status == 2">
                                已到账货款
                            </text>
                            <text v-else-if="info.pay_seller_goods_amount_status == 1">
                                冻结货款
                            </text>
                            <text v-else-if="info.pay_seller_goods_amount_status == 0">
                                未到账货款
                            </text>
                            <text class="text-sm margin-left-4">￥</text>{{info.goods_amount | floor(4)}}
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                data: {
                    formtag: {},
                    form: {
                        is_manage: '0',
                        search_value: '',
                    },
                    offset: 0,
                    limit: 15,
                    stop: false,
                    list: [],
                },
            }
        },
        onLoad(params) {
            if (params.is_manage) {
                this.data.form.is_manage = params.is_manage;
            }
            this.getList(this.$api.list_action_page_init);
        },
        onReachBottom() {
            this.getList(this.$api.list_action_add);
        },
        methods: {
            searchBtn() {
                this.getList(this.$api.list_action_force_init);
            },
            getList(action) {
                this.$api.list(this, {
                    action,
                    url: '/userPay/SellerPriceBalance/list',
                    data_append: this.data.form,
                    success: (Result) => {
                        if (this.$api.form.toast(this, Result)) return;
                        Result.result.list.forEach(info => {
                            info.pay_type_string = this.$dict.pay_type[info.pay_type];
                        })
                        this.data.list = this.data.list.concat(Result.result.list);
                    }
                });
            },
        }
    }
</script>
